
// 读取图片
const reader = new FileReader

// 图片质量
let quality = 10

// 压缩图片的 base64
let compressedImgSrc = ''

// 图片解析
function imageCompression(image) {
    // 先将 image 转为 base64
    reader.readAsDataURL(image)
    return new Promise((resolve) => {
        reader.onload = async () => {
            // 读取图片源
            const originImgSrc = reader.result
            // 压缩图片的返回值
            resolve(await createCompressedImage({
                // 原图片的 base64
                imgSrc: originImgSrc,
                // 图片类型
                type: image.type
            }))
        }
    })
}


// 压缩图片的函数
function createCompressedImage({
    imgSrc,
    type
}) {
    // 创建 Canvas 
    const oCan = document.createElement('canvas')
    // 创建 img
    const oImg = document.createElement('img')
    // 得到 Canvas 上下文对象
    const ctx = oCan.getContext('2d')

    // 将原图片的 base64 传给新创建的img
    oImg.src = imgSrc

    return new Promise((resolve) => {
        // 当图片 onload 加载时
        oImg.onload = () => {
            // 给 img 设置宽高
            const imgWidth = oImg.width
            const imgHeight = oImg.height

            // 给 Canvas 设置宽高
            oCan.width = imgWidth
            oCan.height = imgHeight

            // 画 Canvas (画的对象，起点x，起点y，画的宽，画的高)
            ctx.drawImage(oImg, 0, 0, imgWidth, imgHeight)

            // 生成图片
            doCompress(oCan, imgSrc, type)
            resolve(compressedImgSrc)
        }
    })
}


// 递归压缩
function doCompress(canvas, imgSrc, type) {
    compressedImgSrc = canvas.toDataURL(type, quality / 100)
    if (compressedImgSrc.length >= imgSrc.length && quality > 10) {
        quality -= 10
        doCompress(canvas, imgSrc, type)
    }
}

// base64 转 文件
function base64ToFile(base64, fileName) {
    // 将base64按照 , 进行分割 将前缀  与后续内容分隔开
    let data = base64.split(',');
    // 利用正则表达式 从前缀中获取图片的类型信息（image/png、image/jpeg、image/webp等）
    let type = data[0].match(/:(.*?);/)[1];
    // 从图片的类型信息中 获取具体的文件格式后缀（png、jpeg、webp）
    let suffix = type.split('/')[1];
    // 使用atob()对base64数据进行解码  结果是一个文件数据流 以字符串的格式输出
    const bstr = window.atob(data[1]);
    // 获取解码结果字符串的长度
    let n = bstr.length
    // 根据解码结果字符串的长度创建一个等长的整形数字数组
    // 但在创建时 所有元素初始值都为 0
    const u8arr = new Uint8Array(n)
    // 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元
    while (n--) {
        // charCodeAt()：获取给定索引处字符对应的 UTF-16 代码单元
        u8arr[n] = bstr.charCodeAt(n)
    }
    // 利用构造函数创建File文件对象
    // new File(bits, name, options)
    const file = new File([u8arr], `${fileName}.${suffix}`, {
        type: type
    })
    // 将File文件对象返回给方法的调用者
    return file
}